<template>
  <van-nav-bar title="财务管理" left-text="返回" left-arrow @click-left="goHome" />
  <div style="margin-left: 10px">
    <van-cell-group title="财务详情" class="finance-statistics">
      <van-row gutter="1" justify="center">
        <van-col class="jc-box-car-1" span="6">
          <span class="title">账单总数</span>
        </van-col>
        <van-col span="17" class="jc-box-car-1">{{ report.count || 0 }} 条</van-col>
      </van-row>
      <van-row gutter="1" style="padding-bottom: 30px;">
        <van-col span="24" class="jc-box-car-2">
          <span class="title">账单周期</span> 从 {{ report.date_start || '无' }} 至 {{ report.date_end || '无' }}
        </van-col>
        <van-col span="24" class="jc-box-car-2">
          <span class="title">编辑时间</span> 从 {{ report.mtime_start || '无' }} 至 {{ report.mtime_end || '无' }}
        </van-col>
      </van-row>
    </van-cell-group>
    <van-cell-group title="基本操作">
      <van-cell title="财务账单" is-link to="/finance/bill" />
      <van-cell title="财务客体" is-link to="/finance/master" />
    </van-cell-group>
  </div>
</template>

<script lang="ts" setup>
import { Wap } from "../../../common/wap";
import { showFailToast } from "vant";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { useRouter } from "vue-router";


const router = useRouter();
const report: Ref<KvObj> = ref({});

function goHome() {
  router.push("/user");
}

onMounted(function () {
  Wap.get("/square/data/bill/report")
    .then((result) => {
      Wap.resolveResponse(result)
        .then((data) => {
          report.value = data;
        })
        .catch((msg) => {
          showFailToast(msg);
        });
    })
    .catch((msg) => {
      console.log(msg);
    });
});


</script>

<style scoped>
.jc-box-car-1 {
  display: block;
  margin-top: 13px;
}

.jc-box-car-2 {
  display: block;
  margin-top: 16px;
}

.finance-statistics .title {
  font-weight: bold;
}
</style>